<template>
  <div class="h-baseic-spacing-wrp">
    <transition name="basic-spacing">
      <div :class="['h-basic-spacing', {'hover-action':edit}]" v-show="!inputShow" v-text="sign || placeholder" />
    </transition>
    <input :class="['h-basic-spacing', {show:inputShow}]" :placeholder="placeholder" @blur="inputHideHandler" @focus="inputShowHandler" maxlength="60" type="text" v-if="edit" v-model="sign" />
  </div>
</template>

<script>
import { resetInfoAPI } from '@/api/account';

export default {
    props: {
        edit: Boolean,
        value: String,
    },
    data() {
        return {
            sign: this.value,
            inputShow: false,
            placeholder: '这个人好懒, 什么都没有写 (´･_･`)',
        };
    },
    methods: {
        inputShowHandler() {
            this.inputShow = true;
        },
        inputHideHandler() {
            this.inputShow = false;
            // 这里判断下, 尽量不要进行无意义的修改
            if (this.sign === this.value) return;
            // 这里进行提交
            resetInfoAPI({ sign: this.sign }).catch(err => console.error(err));
        },
    },
};
</script>

<style lang="less" scoped>
.h-baseic-spacing-wrp {
  width: 740px;
  height: 26px;
  & > input {
    box-shadow: inset 0 2px 4px rgba(35, 54, 86, 0.3);
    color: #6d757a;
    opacity: 0;
  }
  .show {
    opacity: 1;
  }

  &:hover .hover-action {
    background: hsla(0, 0%, 100%, 0.2);
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.5);
  }
}
.h-basic-spacing {
  width: 740px;
  height: 26px;
  line-height: 26px;
  margin-top: 10px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  white-space: nowrap;
  cursor: text;
  user-select: initial;
  // color: @global_text_color_grey;
  color: #d6dee4;
  position: absolute;
  transition: all 0.3s ease;
}

.basic-spacing-enter,
.basic-spacing-leave-to {
  opacity: 0;
}
.basic-spacing-enter-to,
.basic-spacing-leave {
  opacity: 1;
}
</style>
